<?php

use backend\models\MallVideo;
use wbraganca\videojs\VideoJsWidget;
use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel backend\models\MallVideoSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = '视频管理';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="mall-video-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a('添加视频', ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
//            'cid',
            'category.name',
//            'title',
            [
                'attribute' => 'title',
                'enableSorting' => false,
            ],
//            'img',
            [
                'attribute' => 'img',
                'enableSorting' => false,
                'format' => [
                    'image',
                    [
                        'width' => '80',
                        'height' => '80',
                    ],
                ],
            ],
//            'video_url:url',
            [
                'label' => '视频',
                'attribute' => 'video_url',
                'enableSorting' => false,
                'format' => 'raw',
                'value' => function ($model, $key, $index, $column) {
                    return VideoJsWidget::widget([
                        'options' => [
                            'class' => 'video-js vjs-default-skin vjs-big-play-centered',
                            'poster' => $model->img,
                            'width' => '190',
                            'height' => '120',
                            'controls' => true,
                        ],
                        'jsOptions' => [
                            'preload' => 'auto',
                        ],
                        'tags' => [
                            'source' => [
                                ['src' => $model->video_url, 'type' => 'video/mp4'],
                                ['src' => 'http://vjs.zencdn.net/v/oceans.webm', 'type' => 'video/webm']
                            ],
                            'track' => [
                                ['kind' => 'captions', 'src' => 'http://vjs.zencdn.net/vtt/captions.vtt', 'srclang' => 'en', 'label' => 'English']
                            ]
                        ]
                    ]);
                }
            ],
            //'play_count',
            //'author',
            //'sort',
//            'status',
            [
                'attribute' => 'status',
                'enableSorting' => false,
                'value' => 'statusValue',
                'filter' => MallVideo::attributeValue()['status']
            ],
            'create_time:datetime',
            //'update_time:datetime',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>
